/**
 * Created by justao on 16/2/14.
 */

'use strict';

import React, {
  Component,
  NavigationExperimental,
  StyleSheet,
  Text,
  TouchableOpacity,
  TouchableWithoutFeedback,
  View,
} from 'react-native';

const {
  Container: NavigationContainer,
  Reducer: NavigationReducer,
} = NavigationExperimental;
const {
  JumpToAction,
} = NavigationReducer.TabsReducer;

import {
  tabKeyTitleMap
} from './Strings'


class TabBar extends Component {
  render() {
    return (
      <View style={styles.tabBar}>
        {this.props.tabs.map(this._renderTab.bind(this))}
      </View>
     );
  }
  
  _renderTab(tab, index) {
    var textStyle = [styles.tabButtonText];
    if (this.props.index === index) {
      textStyle.push(styles.selectedTabButtonText);
    }
    return (
      <TouchableOpacity
        style={styles.tabButton}
        key={tab.key}
        onPress={() => {
          this.props.onNavigate(JumpToAction(index));
        }}>
        <Text style={textStyle}>
          {tabKeyTitleMap(tab.key)}
        </Text>
      </TouchableOpacity>
    );
  }
}

TabBar = NavigationContainer.create(TabBar);

const styles = StyleSheet.create({
  tabBar: {
    height: 50,
    flexDirection: 'row',
  },
  tabButton: {
    flex: 1,
    paddingTop: 15,
  },
  tabButtonText: {
    textAlign: 'center',
    fontSize: 15,
    fontWeight: '300',
  },
  selectedTabButtonText: {
    color: 'blue',
  },
});

export default TabBar;